<script setup lang="ts">
import type { EChartsOption } from 'echarts'

import { useBITrend } from '@fl/api/add-elevator-api'
import { Echart } from '@fl/origin-components/Echart'
import * as echarts from 'echarts/core'
import { set } from 'lodash-es'

const areaCode = defineModel<string>('areaCode', { required: true })

const calcType = ref<number>(1)

function switchTab(type) {
    calcType.value = type
}

const chartOptions = reactive({
    grid: {
        bottom: 0,
        containLabel: true,
        left: 0,
        right: 0,
        top: 35,
    },
    legend: {
        itemGap: 20,
        itemHeight: 8,
        itemWidth: 8,
        left: 'center',
        padding: 0,
        data: ['已上报', '加装中', '已加装'],
        icon: 'circle', // 图标设置为圆形
        textStyle: {
            color: '#fff',
            fontSize: 12,
            lineHeight: 12,
        },
        top: 10,
    },
    series: [
        {
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        color: '#FF964A',
                        offset: 0,
                    },
                    {
                        color: '#fff',
                        offset: 1,
                    },
                ]),
                opacity: 0.25,
            },
            data: [],
            emphasis: {
                focus: 'series',
            },
            lineStyle: {
                color: 'rgba(255, 150, 74, 0.65)',
            },
            itemStyle: {
                color: '#FF964A', // 设置系列颜色
            },
            name: '已上报',
            showSymbol: false,
            smooth: true,
            type: 'line',
        },
        {
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        color: '#3BA1FF',
                        offset: 0,
                    },
                    {
                        color: '#fff',
                        offset: 1,
                    },
                ]),
                opacity: 0.25,
            },
            data: [],
            emphasis: {
                focus: 'series',
            },
            lineStyle: {
                color: 'rgba(59, 161, 255, 0.65)',
            },
            itemStyle: {
                color: '#3BA1FF', // 设置系列颜色
            },
            name: '加装中',
            showSymbol: false,
            smooth: true,
            type: 'line',
        },
        {
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        color: '#00FF44',
                        offset: 0,
                    },
                    {
                        color: '#fff',
                        offset: 1,
                    },
                ]),
                opacity: 0.25,
            },
            data: [],
            emphasis: {
                focus: 'series',
            },
            lineStyle: {
                color: 'rgba(46,199,46,0.65)',
            },
            itemStyle: {
                color: '#00FF44', // 设置系列颜色
            },
            name: '已加装',
            showSymbol: false,
            smooth: true,
            type: 'line',
        },
    ],
    tooltip: {
        // axisPointer: {
        //     type: 'cross',
        // },
        padding: [5, 10],
        trigger: 'axis',
    },
    xAxis: {
        axisLabel: {
            align: 'center',
            alignMaxLabel: 'right',
            alignMinLabel: 'left',
            color: '#86909C',
            // formatter(value) {
            //     const texts = value.split('-')
            //     texts.shift()
            //     return texts.join('-')
            // },
        },
        data: [],
        type: 'category',
    },
    yAxis: {
        type: 'value',
        splitLine: {
            lineStyle: {
                type: 'dashed', // 虚线
                color: 'rgba(230, 247, 255, 0.1)',
            },
        },
    },
}) as EChartsOption

const params = computed(() => ({
    areaCode: areaCode.value === '420100' ? '' : areaCode.value,
    calcType: calcType.value, // 统计类型 1:当前;2:累计
}))

const { data: chartsData } = useBITrend(params)

watchEffect(() => {
    if (chartsData.value) {
        // console.log('chartsData.value', chartsData.value)
        const arr1 = chartsData.value.map(item => item.dateMonth) // 所有 dateMonth
        const arr2 = chartsData.value.map(item => item.submitCount) // 已上报
        const arr3 = chartsData.value.map(item => item.processCount) // 加装中
        const arr4 = chartsData.value.map(item => item.finishCount) // 已加装
        set(
            chartOptions,
            'xAxis.data',
            arr1,
        )
        set(
            chartOptions,
            'series[0].data',
            arr2,
        )
        set(
            chartOptions,
            'series[1].data',
            arr3,
        )
        set(
            chartOptions,
            'series[2].data',
            arr4,
        )
    }
})
</script>

<template>
    <div class="container">
        <div class="bottom-title">
            <span>增长趋势</span>

            <el-button type="text"
                       class="tab-btn"
                       :class="{ active: calcType === 1 }"
                       @click="switchTab(1)"
            >
                当前
            </el-button>

            <el-button type="text"
                       class="tab-btn"
                       :class="{ active: calcType === 2 }"
                       @click="switchTab(2)"
            >
                累计
            </el-button>
        </div>

        <div class="body">
            <Echart :options="chartOptions"
                    height="80%"
            />
        </div>
    </div>
</template>

<style lang="scss" scoped>
.bottom-title {
    height: 4.2em;
    background-image: url('@/assets/images/bottom-title-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    justify-content: end;
    padding: 1.8em 1.5em 0 0;
    margin: 0 1em;
    > span:first-child {
        font-size: 1.8em;
        font-family: 'YouSheBiaoTiHei', 'BASE';
        color: white;
        position: absolute;
        top: 20%;
        left: 1.4em;
    }
    .tab-btn {
        width: 4.8em;
        height: 1.6em;
        background-image: url('@/assets/images/rectangle.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color: #fff;
        font-size: 1.1em;
        padding: 0 0.4em;
        display: block;
        text-align: center;
        margin-left: -0.5em;
        &:hover,
        &.active {
            background-image: url('@/assets/images/rectangle-a.png');
        }
    }
}
.container {
    height: calc(100vh - 70em);
    min-height: 20em;
}
.body {
    margin: 0 1.5em;
    padding: 0 1em;
    background: linear-gradient(180deg, rgba(0, 43, 71, 0.2) 2%, #002b47 100%);
    height: 80%;
}
</style>
